<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日头条登录</title>
    <script src="./js/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .bg-video {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;
            overflow: hidden;
        }

        .bg-video video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.5);
        }

        .center {
            width: 100%;
            max-width: 860px;
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(8px);
            border-radius: 20px;
            border: 1px solid #eee;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            flex-wrap: wrap;
        }

        .left {
            flex: 1;
            min-width: 300px;
            padding: 40px 20px;
            text-align: center;
            border-right: 1px solid #eee;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .left h2 {
            font-size: 22px;
            color: #333;
            margin-bottom: 30px;
            font-weight: 600;
        }

        .qrcode {
            width: 200px;
            height: 200px;
            margin: 0 auto 20px;
            border-radius: 8px;
            overflow: hidden;
        }

        .left p {
            color: #666;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .left p span {
            color: #ff4d4f;
            font-weight: 500;
        }

        .scan-tip {
            color: #999;
            font-size: 13px;
            cursor: pointer;
            transition: color 0.3s;
        }

        .scan-tip:hover {
            color: #ff4d4f;
            text-decoration: underline;
        }

        .right {
            flex: 1;
            min-width: 350px;
            padding: 40px 30px;
        }

        .tab-header {
            text-align: center;
            margin-bottom: 30px;
            font-size: 20px;
            color: #333;
        }

        .tab-header span {
            cursor: pointer;
            padding: 0 15px;
            position: relative;
            transition: all 0.3s;
        }

        .tab-header .active {
            color: #ff4d4f;
            font-weight: 600;
        }

        .tab-header .active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #ff4d4f;
            border-radius: 1px;
        }

        .tab-header span:not(.active) {
            color: #999;
        }

        .tab-header span:not(.active):hover {
            color: #ff4d4f;
        }

        .form-container {
            margin-bottom: 20px;
        }

        .form-group {
            position: relative;
            margin-bottom: 20px;
        }

        .form-control {
            width: 100%;
            height: 48px;
            padding: 0 16px;
            padding-right: 44px; /* 为密码切换按钮预留空间 */
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            color: #333;
            transition: all 0.3s;
            background-color: #f9f9f9;
        }

        .form-control:focus {
            outline: none;
            border-color: #ff4d4f;
            box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);
            background-color: #fff;
        }

        .form-control.error {
            border-color: #ff4d4f;
        }

        .error-message {
            color: #ff4d4f;
            font-size: 12px;
            margin-top: 5px;
            margin-left: 16px;
            display: none;
        }

        .error-message.show {
            display: block;
        }

        .forget-pwd {
            position: absolute;
            right: 44px; /* 调整位置，避免与密码切换按钮重叠 */
            top: 50%;
            transform: translateY(-50%);
            font-size: 13px;
            color: #ff4d4f;
            text-decoration: none;
        }

        .forget-pwd:hover {
            text-decoration: underline;
        }

        /* 统一验证码样式 */
        .verify-code {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .verify-code .form-control {
            flex: 1;
        }

        .verify-code-img {
            width: 120px;
            height: 48px;
            border-radius: 8px;
            cursor: pointer;
            object-fit: cover;
            border: 1px solid #ddd;
            transition: all 0.3s;
            background-color: #f9f9f9;
        }

        .verify-code-img:hover {
            border-color: #ff4d4f;
            transform: scale(1.02);
        }

        .password-toggle {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            cursor: pointer;
            transition: color 0.3s;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .password-toggle:hover {
            color: #ff4d4f;
        }

        .btn-group {
            display: flex;
            gap: 15px;
            margin: 30px 0 20px;
        }

        .btn {
            flex: 1;
            height: 48px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }

        .primary-btn {
            background-color: #ff4d4f;
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .primary-btn:hover {
            background-color: #ff3333;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
        }

        .primary-btn.loading {
            background-color: #ff7878;
            cursor: not-allowed;
        }

        .primary-btn.loading::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s linear infinite;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .primary-btn.loading span {
            visibility: hidden;
        }

        .secondary-btn {
            background-color: #fff;
            color: #ff4d4f;
            border: 1px solid #ff4d4f;
        }

        .secondary-btn:hover {
            background-color: #fef0f0;
            transform: translateY(-2px);
        }

        .msg-box {
            height: 20px;
            text-align: center;
            color: #ff4d4f;
            font-size: 13px;
            margin-bottom: 15px;
            transition: all 0.3s;
        }

        .msg-box.success {
            color: #52c41a;
        }

        .other-login {
            margin: 30px 0;
            text-align: center;
            position: relative;
        }

        .other-login::before,
        .other-login::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 30%;
            height: 1px;
            background-color: #eee;
        }

        .other-login::before {
            left: 0;
        }

        .other-login::after {
            right: 0;
        }

        .other-login p {
            color: #999;
            font-size: 13px;
            display: inline-block;
            padding: 0 10px;
            background-color: #fff;
        }

        .icon-group {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 10px;
        }

        .icon-group img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .icon-group img:hover {
            transform: scale(1.1);
        }

        .agreement {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #999;
            margin-top: 20px;
        }

        .agreement input {
            margin-right: 8px;
            accent-color: #ff4d4f;
        }

        .agreement span {
            color: #ff4d4f;
            cursor: pointer;
        }

        .agreement span:hover {
            text-decoration: underline;
        }

        .link-group {
            text-align: center;
            margin-top: 10px;
            font-size: 13px;
        }

        .link-group a {
            color: #999;
            text-decoration: none;
            margin: 0 8px;
        }

        .link-group a:hover {
            color: #ff4d4f;
            text-decoration: underline;
        }

        .form-tabs {
            display: none;
        }

        .form-tabs.active {
            display: block;
        }

        @media (max-width: 768px) {
            .center {
                margin: 20px auto;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            }

            .left {
                border-right: none;
                border-bottom: 1px solid #eee;
            }

            .right {
                padding: 30px 20px;
            }
            
            .verify-code-img {
                width: 100px;
            }
        }

        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="bg-video">
        <video autoplay muted loop src="https://sf3-cdn-tos.toutiaostatic.com/obj/mp/welcome-video.mp4" poster="https://sf3-cdn-tos.toutiaostatic.com/obj/mp/welcome-video-poster-v2.png" class="video"></video>
    </div>
    <div class="center">
        <div class="left">
            <h2>手机扫码登录</h2>
            <img src="./img/2weima.jfif" alt="登录二维码" class="qrcode">
            <p>打开<span>今日头条APP</span>--点击左上角扫一扫</p>
            <div class="scan-tip">怎么扫码登录?</div>
        </div>
        <div class="right">
            <div class="tab-header">
                <span class="password-tab active" data-tab="login-tab">密码登录</span> | 
                <span class="sms-tab" data-tab="register-tab">注册账号</span>
            </div>
            
            <!-- 登录表单 -->
            <div id="login-tab" class="form-tabs active">
                <div class="form-container">
                    <div class="form-group">
                        <input type="text" id="userId" class="form-control" placeholder="请输入账号" required>
                        <div class="error-message" id="userIdError">请输入有效的账号（用户名或邮箱）</div>
                    </div>
                    <div class="form-group">
                        <input type="password" id="userPwd" class="form-control" placeholder="请输入密码" required>
                        <i class="fas fa-eye-slash password-toggle" id="pwdToggle"></i>
                        <a href="#" class="forget-pwd" onclick="switchTab('reset-tab')">忘记密码</a>
                        <div class="error-message" id="userPwdError">密码长度不能少于6位</div>
                    </div>
                    <div class="form-group verify-code">
                        <input type="text" id="checkNum" class="form-control" placeholder="请输入验证码" required>
                        <img src="http://10.47.164.204:8080/servletdemo/NumServlet" id="checkImg" class="verify-code-img" alt="验证码">
                        <div class="error-message" id="checkNumError">请输入验证码</div>
                    </div>
                </div>
                
                <div class="btn-group">
                    <button type="button" class="btn primary-btn" onclick="login()">
                        <span>登录</span>
                    </button>
                    <button type="button" class="btn secondary-btn" onclick="switchTab('register-tab')">注册</button>
                </div>
                <div class="msg-box" id="loginMessageBox"></div>
            </div>
            
            <!-- 忘记密码表单（调整为不依赖手机号） -->
            <div id="reset-tab" class="form-tabs">
                <div class="form-container">
                    <div class="form-group">
                        <input type="text" id="resetUserId" class="form-control" placeholder="请输入账号" required>
                        <div class="error-message" id="resetUserIdError">请输入有效的账号</div>
                    </div>
                    <div class="form-group verify-code">
                        <input type="text" id="resetCheckNum" class="form-control" placeholder="请输入验证码" required>
                        <img src="http://10.47.164.204:8080/servletdemo/NumServlet" id="resetCheckImg" class="verify-code-img" alt="验证码">
                        <div class="error-message" id="resetCheckNumError">请输入验证码</div>
                    </div>
                    <div class="form-group">
                        <input type="password" id="newPwd" class="form-control" placeholder="请输入新密码" required>
                        <i class="fas fa-eye-slash password-toggle" id="newPwdToggle"></i>
                        <div class="error-message" id="newPwdError">新密码长度不能少于6位</div>
                    </div>
                    <div class="form-group">
                        <input type="password" id="confirmPwd" class="form-control" placeholder="请确认新密码" required>
                        <i class="fas fa-eye-slash password-toggle" id="confirmPwdToggle"></i>
                        <div class="error-message" id="confirmPwdError">两次输入的密码不一致</div>
                    </div>
                </div>
                
                <div class="btn-group">
                    <button type="button" class="btn primary-btn" onclick="resetPassword()">
                        <span>确认重置</span>
                    </button>
                    <button type="button" class="btn secondary-btn" onclick="switchTab('login-tab')">取消</button>
                </div>
                <div class="msg-box" id="resetMessageBox"></div>
            </div>
            
            <!-- 注册表单（不使用手机号，带密码显示功能） -->
            <div id="register-tab" class="form-tabs">
                <div class="form-container">
                    <div class="form-group">
                        <input type="text" id="regUserId" class="form-control" placeholder="请设置账号" required>
                        <div class="error-message" id="regUserIdError">账号只能包含字母、数字和下划线，长度4-16位</div>
                    </div>
                    <div class="form-group verify-code">
                        <input type="text" id="regCheckNum" class="form-control" placeholder="请输入数字验证码" required>
                        <img src="http://10.47.164.204:8080/servletdemo/NumServlet" id="regCheckImg" class="verify-code-img" alt="数字验证码">
                        <div class="error-message" id="regCheckNumError">请输入数字验证码</div>
                    </div>
                    <div class="form-group">
                        <input type="password" id="regUserPwd" class="form-control" placeholder="请设置密码" required>
                        <i class="fas fa-eye-slash password-toggle" id="regPwdToggle"></i>
                        <div class="error-message" id="regUserPwdError">密码长度不能少于6位</div>
                    </div>
                </div>
                
                <div class="btn-group">
                    <button type="button" class="btn primary-btn" onclick="register()">
                        <span>完成注册</span>
                    </button>
                    <button type="button" class="btn secondary-btn" onclick="switchTab('login-tab')">取消</button>
                </div>
                <div class="msg-box" id="regMessageBox"></div>
                
                <div class="agreement">
                    <input type="checkbox" class="reg-quan" required>
                    已阅读并同意<span>今日头条平台服务协议、隐私权政策</span>
                </div>
            </div>
            
            <div class="other-login">
                <p>其他登录方式</p>
            </div>
            <div class="icon-group">
                <img src="./images/Image1.gif" alt="第三方登录1">
                <img src="./images/Image2.gif" alt="第三方登录2">
            </div>
            <div class="link-group">
                <a href="#" onclick="switchTab('reset-tab')">忘记密码</a> | <a href="#" onclick="switchTab('register-tab')">免费注册</a>
            </div>
        </div>
    </div>

    <script>
        // 标签切换功能
        function switchTab(tabId) {
            // 隐藏所有表单
            $('.form-tabs').removeClass('active');
            // 显示目标表单
            $('#' + tabId).addClass('active');
            // 更新标签状态
            $('.tab-header span').removeClass('active');
            $('.tab-header span[data-tab="' + tabId + '"]').addClass('active');
            // 清空消息
            $('.msg-box').text('');
        }

        // 初始化标签点击事件
        $('.tab-header span').click(function() {
            const tabId = $(this).data('tab');
            switchTab(tabId);
        });

        // 统一验证码刷新函数
        function refreshVerifyCode(imgId) {
            const img = document.getElementById(imgId);
            img.src = `http://10.47.164.204:8080/servletdemo/NumServlet?time=${new Date().getTime()}`;
        }

        // 为所有验证码图片绑定点击刷新事件
        document.getElementById('checkImg').addEventListener('click', function() {
            refreshVerifyCode('checkImg');
        });
        
        document.getElementById('resetCheckImg').addEventListener('click', function() {
            refreshVerifyCode('resetCheckImg');
        });
        
        document.getElementById('regCheckImg').addEventListener('click', function() {
            refreshVerifyCode('regCheckImg');
        });

        // 密码显示/隐藏切换（统一应用于所有密码框）
        function setupPasswordToggle(toggleId, passwordId) {
            const toggle = document.getElementById(toggleId);
            const password = document.getElementById(passwordId);
            
            if (toggle && password) {
                toggle.addEventListener('click', function() {
                    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                    password.setAttribute('type', type);
                    // 切换图标
                    this.classList.toggle('fa-eye');
                    this.classList.toggle('fa-eye-slash');
                });
            }
        }
        
        // 为所有密码框初始化密码显示/隐藏功能
        setupPasswordToggle('pwdToggle', 'userPwd');
        setupPasswordToggle('newPwdToggle', 'newPwd');
        setupPasswordToggle('confirmPwdToggle', 'confirmPwd');
        setupPasswordToggle('regPwdToggle', 'regUserPwd');

        // 显示错误信息
        function showError(fieldId, message, msgBoxId) {
            $('#' + fieldId).addClass('error');
            $('#' + fieldId + 'Error').text(message).addClass('show');
            if (msgBoxId) {
                $('#' + msgBoxId).text('').removeClass('success');
            }
        }

        // 隐藏错误信息
        function hideError(fieldId) {
            $('#' + fieldId).removeClass('error');
            $('#' + fieldId + 'Error').removeClass('show');
        }

        // 显示消息提示
        function showMessage(message, isSuccess = false, msgBoxId) {
            const msgBox = msgBoxId ? $('#' + msgBoxId) : $('#messageBox');
            msgBox.text(message);
            if (isSuccess) {
                msgBox.addClass('success');
            } else {
                msgBox.removeClass('success');
            }
            
            // 3秒后自动清除消息
            setTimeout(() => {
                msgBox.text('');
            }, 3000);
        }

        // 验证登录表单（不使用手机号）
        function validateLoginForm() {
            let isValid = true;
            const userId = $('#userId').val().trim();
            const userPwd = $('#userPwd').val().trim();
            const checkNum = $('#checkNum').val().trim();
            
            // 验证账号（用户名或邮箱）
            if (!userId) {
                showError('userId', '请输入账号', 'loginMessageBox');
                isValid = false;
            } else if (!(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(userId) || /^[a-zA-Z0-9_]{4,16}$/.test(userId))) {
                showError('userId', '请输入有效的账号（用户名或邮箱）', 'loginMessageBox');
                isValid = false;
            } else {
                hideError('userId');
            }
            
            // 验证密码
            if (!userPwd) {
                showError('userPwd', '请输入密码', 'loginMessageBox');
                isValid = false;
            } else if (userPwd.length < 6) {
                showError('userPwd', '密码长度不能少于6位', 'loginMessageBox');
                isValid = false;
            } else {
                hideError('userPwd');
            }
            
            // 验证验证码
            if (!checkNum) {
                showError('checkNum', '请输入验证码', 'loginMessageBox');
                isValid = false;
            } else {
                hideError('checkNum');
            }
            
            return isValid;
        }

        // 登录功能
        function login() {
            if (!validateLoginForm()) {
                return;
            }
            
            const loginBtn = $('.primary-btn');
            if (loginBtn.hasClass('loading')) {
                return;
            }
            
            loginBtn.addClass('loading');
            showMessage('', false, 'loginMessageBox');
            
            const userId = $("#userId").val().trim();
            const userPwd = $("#userPwd").val().trim();
            const checkNum = $("#checkNum").val().trim();
            
            const settings = {
                "url": "http://10.47.164.204:8080/servletdemo/LoginServlet",
                "method": "POST",
                "timeout": 10000,
                "headers": {
                    "Content-Type": "application/json"
                },
                "data": JSON.stringify({
                    "userId": userId,
                    "userPwd": userPwd,
                    "checkNum": checkNum
                }),
            };

            $.ajax(settings)
                .done(function (response) {
                    const res = JSON.parse(response);
                    if (res.code === 200) {
                        showMessage('登录成功，正在跳转...', true, 'loginMessageBox');
                        window.localStorage.setItem("name", userId);
                        
                        setTimeout(() => {
                            window.location.href = "./UserIndex.html?id="+userId;
                        }, 1500);
                    } else {
                        if (res.msg.includes('验证码')) {
                            refreshVerifyCode('checkImg');
                        }
                        showMessage(res.msg, false, 'loginMessageBox');
                    }
                })
                .fail(function(xhr, status, error) {
                    console.error('登录失败:', error);
                    showMessage(status === 'timeout' ? '请求超时，请稍后重试' : '网络异常，请稍后重试', false, 'loginMessageBox');
                })
                .always(function() {
                    loginBtn.removeClass('loading');
                });
        }

        // 验证密码重置表单（不依赖手机号）
        function validateResetForm() {
            let isValid = true;
            const resetUserId = $('#resetUserId').val().trim();
            const resetCheckNum = $('#resetCheckNum').val().trim();
            const newPwd = $('#newPwd').val().trim();
            const confirmPwd = $('#confirmPwd').val().trim();
            
            // 验证账号
            if (!resetUserId) {
                showError('resetUserId', '请输入账号', 'resetMessageBox');
                isValid = false;
            } else if (!(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(resetUserId) || /^[a-zA-Z0-9_]{4,16}$/.test(resetUserId))) {
                showError('resetUserId', '请输入有效的账号（用户名或邮箱）', 'resetMessageBox');
                isValid = false;
            } else {
                hideError('resetUserId');
            }
            
            // 验证验证码
            if (!resetCheckNum) {
                showError('resetCheckNum', '请输入验证码', 'resetMessageBox');
                isValid = false;
            } else {
                hideError('resetCheckNum');
            }
            
            // 验证新密码
            if (!newPwd) {
                showError('newPwd', '请输入新密码', 'resetMessageBox');
                isValid = false;
            } else if (newPwd.length < 6) {
                showError('newPwd', '新密码长度不能少于6位', 'resetMessageBox');
                isValid = false;
            } else {
                hideError('newPwd');
            }
            
            // 验证确认密码
            if (!confirmPwd) {
                showError('confirmPwd', '请确认新密码', 'resetMessageBox');
                isValid = false;
            } else if (newPwd !== confirmPwd) {
                showError('confirmPwd', '两次输入的密码不一致', 'resetMessageBox');
                isValid = false;
            } else {
                hideError('confirmPwd');
            }
            
            return isValid;
        }

        // 密码重置功能（不依赖手机号）
        function resetPassword() {
            if (!validateResetForm()) {
                return;
            }
            
            const resetBtn = $('.primary-btn');
            if (resetBtn.hasClass('loading')) {
                return;
            }
            
            resetBtn.addClass('loading');
            showMessage('', false, 'resetMessageBox');
            
            const resetUserId = $("#resetUserId").val().trim();
            const resetCheckNum = $("#resetCheckNum").val().trim();
            const newPwd = $("#newPwd").val().trim();
            
            // 模拟密码重置API请求
            setTimeout(() => {
                showMessage('密码重置成功，请使用新密码登录', true, 'resetMessageBox');
                
                // 3秒后返回登录页
                setTimeout(() => {
                    switchTab('login-tab');
                    // 填充账号到登录框
                    $('#userId').val(resetUserId);
                    resetBtn.removeClass('loading');
                }, 1500);
            }, 1000);
        }

        // 验证注册表单（不使用手机号，带密码显示功能）
        function validateRegisterForm() {
            let isValid = true;
            const regUserId = $('#regUserId').val().trim();
            const regCheckNum = $('#regCheckNum').val().trim();
            const regUserPwd = $('#regUserPwd').val().trim();
            
            // 验证账号（用户名）
            if (!regUserId) {
                showError('regUserId', '请输入账号', 'regMessageBox');
                isValid = false;
            } else if (!/^[a-zA-Z0-9_]{4,16}$/.test(regUserId)) {
                showError('regUserId', '账号只能包含字母、数字和下划线，长度4-16位', 'regMessageBox');
                isValid = false;
            } else {
                hideError('regUserId');
            }
            
            // 验证数字验证码
            if (!regCheckNum) {
                showError('regCheckNum', '请输入数字验证码', 'regMessageBox');
                isValid = false;
            } else {
                hideError('regCheckNum');
            }
            
            // 验证密码
            if (!regUserPwd) {
                showError('regUserPwd', '请设置密码', 'regMessageBox');
                isValid = false;
            } else if (regUserPwd.length < 6) {
                showError('regUserPwd', '密码长度不能少于6位', 'regMessageBox');
                isValid = false;
            } else {
                hideError('regUserPwd');
            }
            
            // 验证协议勾选
            if (!$('.reg-quan').is(':checked')) {
                showMessage('请阅读并同意相关协议', false, 'regMessageBox');
                isValid = false;
            }
            
            return isValid;
        }

        // 注册功能
        function register() {
            if (!validateRegisterForm()) {
                return;
            }
            
            const regBtn = $('.primary-btn');
            if (regBtn.hasClass('loading')) {
                return;
            }
            
            regBtn.addClass('loading');
            showMessage('', false, 'regMessageBox');
            
            const regUserId = $("#regUserId").val().trim();
            const regUserPwd = $("#regUserPwd").val().trim();
            const regCheckNum = $("#regCheckNum").val().trim();
            
            const settings = {
                "url": "http://10.47.164.204:8080/servletdemo/RegisterServlet",
                "method": "POST",
                "timeout": 10000,
                "headers": {
                    "Content-Type": "application/json"
                },
                "data": JSON.stringify({
                    "userId": regUserId,
                    "userPwd": regUserPwd,
                    "checkNum": regCheckNum
                }),
            };

            $.ajax(settings)
                .done(function (response) {
                    const res = JSON.parse(response);
                    showMessage(res.msg, res.code === 200, 'regMessageBox');
                    if (res.code === 200) {
                        window.localStorage.setItem("name", regUserId);
                        
                        // 注册成功后跳转到登录页
                        setTimeout(() => {
                            switchTab('login-tab');
                            $('#userId').val(regUserId);
                        }, 1500);
                    } else {
                        if (res.msg.includes('验证码')) {
                            refreshVerifyCode('regCheckImg');
                        }
                    }
                })
                .fail(function() {
                    showMessage("网络异常，请稍后重试", false, 'regMessageBox');
                })
                .always(function() {
                    regBtn.removeClass('loading');
                });
        }

        // 输入框实时验证
        $('.form-control').on('input', function() {
            const fieldId = $(this).attr('id');
            hideError(fieldId);
        });

        // 协议勾选状态变化时清除相关错误
        $('.reg-quan').on('change', function() {
            if ($(this).is(':checked')) {
                $('#regMessageBox').text('');
            }
        });

        // 键盘回车键登录功能
        $('#checkNum').on('keypress', function(e) {
            if (e.which === 13) { // 回车键
                login();
            }
        });

        // 自动填充上次登录的账号
        $(document).ready(function() {
            const lastUserId = window.localStorage.getItem("name");
            if (lastUserId) {
                $('#userId').val(lastUserId);
            }
        });
        
    </script>
</body>
</html>